<template>
  <van-nav-bar>
    <template #left>
      <h3>个人中心</h3>
    </template>
    <template #right>
      <van-icon name="chat-o" size="24" badge="9" />
    </template>
  </van-nav-bar>

  <div id="member">
    <div>
      <van-cell size="large" >
        <template #title>
          <div class="content-box">
            <img :src="member.avatar" alt="" />
            <div class="right">
              <div class="desc">{{ member.nickname }}</div>
              <div class="desc">{{ member.username }}</div>
            </div>
          </div>
        </template>
      </van-cell>
  <!--    <van-cell v-show="authed">
        <template #icon>
          <van-button color="#04BE02" size="small" block @click="wxAuthUrlHandle()">立即授权</van-button>
        </template>
      </van-cell> -->
      <van-cell title="基本信息" is-link to="info">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #icon>
          <van-icon class-prefix="my-icon" name="hongbao1" size="32px" />
        </template>
      </van-cell>
<!--      <van-cell title="学历信息" is-link to="info">
        <template #icon>
          <van-icon class-prefix="my-icon" name="jiaoyu" size="32px" />
        </template>
      </van-cell> -->
      <van-cell title="修改密码" is-link @click="passwordResetShow = true">
        <template #icon>
          <van-icon class-prefix="my-icon" name="tequan1" size="32px" />
        </template>
      </van-cell>
      <van-cell title="关于我们" is-link to="about">
        <template #icon>
          <van-icon class-prefix="my-icon" name="huore1" size="32px" />
        </template>
      </van-cell>
      <van-cell title="退出登录" is-link @click="logoutHandle()">
        <template #icon>
          <van-icon name="clear" size="32px" />
        </template>
      </van-cell>

      <van-popup v-model:show="passwordResetShow" closeable :style="{ padding: '10px' }" >
        <van-form @submit="updatePasswordHandle">
          <van-cell-group inset>
            <van-field
              v-model="upPasswordForm.password"
              type="password"
              name="原密码"
              label="原密码"
              placeholder="请输入原密码"
              :rules="[{ required: true, message: '请填写原密码' }]"
            />
            <van-field
              v-model="upPasswordForm.newPassword"
              type="password"
              name="新密码"
              label="新密码"
              placeholder="请填写新密码"
              :rules="[{ required: true, message: '请填写新密码' }]"
            />
            <van-field
              v-model="upPasswordForm.confirmPassword"
              type="password"
              name="确认密码"
              label="确认密码"
              placeholder="请填写确认密码"
              :rules="[{ required: true, message: '请填写确认密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </van-popup>
    </div>
  </div>
  <TabBar />
</template>
<script>
import { clearLoginInfo } from '@/utils'
import { useRouter } from "vue-router"
import { logout, wxAuthUrl, getUserInfo } from "@/api/member";
import http from "@/utils/http";
import { showSuccessToast, showFailToast, showConfirmDialog  } from "vant"
import { onBeforeMount, reactive, toRefs } from "vue"
import TabBar from "@/components/layout/tab-bar";
import Cookies from "js-cookie"
export default {
  components: {
    TabBar
  },

  setup(){
    const router = useRouter();
    const state = reactive({
      passwordResetShow: false,
      authed: false,

      upPasswordForm: {
        password: '',
        newPassword: '',
        confirmPassword: ''
      },
      member: {},
    })

    onBeforeMount(async () => {
      if (Cookies.get('token')) {
        await http.get('/member/userInfo').then(({ data: res }) => {
          if (res.code !== 0) {
            return showFailToast(res.msg)
          }
          if(!res.data.avatar){
            res.data.avatar="https://img.yzcdn.cn/vant/cat.jpeg";
          }
          state.member = res.data
          if (state.member.openid ==null) {
            state.authed = true
          }
        })
      } else {
        router.replace("/login");
      }
    })

    const logoutHandle = ()=> {
      showConfirmDialog({ title: "确认", message: "确认退出吗?"}).then(() => {
        http.post('/logout').then(({ data: res }) => {
          if (res.code !== 0) {
            showFailToast(res.msg)
          }
          clearLoginInfo()
          router.replace('/login')
        })
      }).catch(() => {});
    }

    const updatePasswordHandle = ()=> {
        http.post('/member/updatePassword', state.upPasswordForm).then(({ data: res }) => {
          if (res.code !== 0) {
            showFailToast(res.msg)
          }
          showSuccessToast("修改成功！")
          state.passwordResetShow = false
        })
    }

    const wxAuthUrlHandle = () =>{
      http.get('/wechat/public/authUrl/',state.member.id).then((res) => {
        window.location.href = res.data;
      })
    }

    const toMenuHandle= (url) => {
      router.push({
        path: url,
        query: {
          name: url
        }
      })
    }

    return {
      ...toRefs(state),
      updatePasswordHandle,
      logoutHandle,
      toMenuHandle,
      wxAuthUrlHandle
    }
  },

}
</script>

<style lang="less" scoped>
#member {
  text-align: center;
}

.content-box {
  display: flex;
  img {
    width: 64px;
    height: 64px;
    border-radius: 1rem;
  }
  .right {
    padding-left: 12px;
    text-align: left;
    .title {
      font-size: 16px;
      font-weight: bold;
    }
    .desc {
      font-size: 12px;
      color: #969696;
    }
  }
}
</style>
